<template>
  <!--为echarts准备一个具备大小的容器dom-->
  <div id="main" style="width:100%;height:132px"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      charts: "",
      opinionData: ["3", "2", "4", "4", "5"]
    };
  },
  methods: {
    drawLine(id) {
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "0%",
          right: "0%",
          bottom: "1%",
          top:"2%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: ["1", "2", "3", "4", "5"]
        },
        yAxis: {
          type: "value",
          boundaryGap: false
        },

        series: [
          {
            name: "当前温度",
            type: "line",
            data: this.opinionData
          }
        ]
      });
    }
  },
  //调用
  mounted() {
    this.$nextTick(function() {
      this.drawLine("main");
    });
  }
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
</style>